<template>
  <el-dialog
    title="题目预览"
    :visible="showDialogVisible"
    @close="hAppear"
    width="50%"
    height='80%'
  >
    <el-row>
      <el-col :span="6"
        ><div class="row-col">
          【题型】:
          <span v-if="titleInformation.questionType === '1'">单选题</span>
          <span v-else-if="titleInformation.questionType === '2'">多选题</span>
          <span v-else>简答题</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="row-col">【编号】:{{ titleInformation.id }}</div></el-col
      >
      <el-col :span="6"
        ><div class="row-col">
          【难度】:
          <span v-if="titleInformation.difficulty === '1'">简单</span>
          <span v-else-if="titleInformation.difficulty === '2'">一般</span>
          <span v-else>困难 </span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="row-col">【标签】:{{ titleInformation.tags }}</div></el-col
      >
      <el-col :span="6"
        ><div class="row-col">
          【学科】:{{ titleInformation.subjectName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="row-col">
          【目录】:{{ titleInformation.directoryName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="row-col">
          【方向】:{{ titleInformation.direction }}
        </div></el-col
      >
    </el-row>
    <hr />
    【题干】：
    <div v-html="titleInformation.question" class="box"></div>
    <div v-if="titleInformation.questionType !== '3'">
      <div style="padding-bottom: 5px">
        {{ titleInformation.questionType === "1" ? "单选题" : "多选题" }}
        选项：（以下选中的选项为正确答案）
      </div>
      <div style="padding: 8px, 0px">
        <div v-if="titleInformation.questionType === '1'">
          <el-radio-group v-model="radio" class="checkBox">
            <el-radio
              :label="item.code"
              v-for="item in titleInformation.options"
              :key="item.id"
              disabled
              ><span>{{ item.code }}:{{ item.title }}</span>
            </el-radio>
          </el-radio-group>
        </div>
        <div v-else class="checkBox">
          <el-checkbox
            v-for="item in titleInformation.options"
            v-model="item.isRight"
            disabled
            :key="item.id"
            :label="item.isRight"
          >
            {{ item.code }}: {{ item.title }}
          </el-checkbox>
        </div>
      </div>
    </div>

    <hr />
    【参考答案】：
    <button
      @click="isShow = true"
      data-v-61b2ab32=""
      type="button"
      class="el-button el-button--danger el-button--small"
    >
      <span>视频答案预览</span>
    </button>
    <div v-if="isShow" class="video" style="">
      <video controls="controls" :src="titleInformation.videoURL"></video>
    </div>
    <hr />
    【答案解析】：
    <div style="display: inline-block" v-html="titleInformation.answer"></div>
    <hr />
    【题目备注】：{{ titleInformation.remarks }}
    <!-- 关闭按钮 -->
    <div>
      <el-button
        type="primary"
        class="hBtn"
        @click="$emit('update:showDialogVisible', false)"
        >关闭</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  props: {
    showDialogVisible: {
      type: Boolean,
      reuuired: true
    },
    Id: {
      type: [String, Number],
      reuuired: true
    }
  },
  data () {
    return {
      titleInformation: {},
      isShow: false,
      checkList: [],
      radio: ''
    }
  },

  methods: {
    hAppear () {
      this.titleInformation = ''
      this.isShow = false
      this.checkList = []
      this.radio = ''
      this.$emit('update:showDialogVisible', false)
    },
    async getInfo () {
      const res = await detail(this.Id)
      this.titleInformation = res.data
      if (this.titleInformation.questionType === '1') {
        const index = this.titleInformation.options.findIndex(
          (ele) => ele.isRight === 1
        )
        this.radio = this.titleInformation.options[index].code
      } else if (this.titleInformation.questionType === '2') {
        this.titleInformation.options.forEach((ele) => {
          ele.isRight = !!ele.isRight
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.row-col {
  margin-bottom: 20px;
}
hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
.el-button--danger:focus,
.el-button--danger:hover {
  background: #f78989;
  border-color: #f78989;
  color: #fff;
}
video {
  width: 400px;
  height: 300px;
  /* display: none; */
}
.hBtn {
  margin-top: 40px;
  margin-left: 91%;
}
.checkBox {
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  span{
    // overflow: hidden;
    display:inline-block;
    width: 100%;
    overflow: hidden;
    // word-break: break-all;
    text-overflow: ellipsis;
    // 省略号
    // word-break:break-all
    // line-height: 20px;
    // white-space:pre-wrap
  }
}
.box{
  color: blue;
}
/*
 */
</style>

<style>
.el-checkbox{
  margin-top: 15px;
}
.el-radio{
  margin-top: 15px;
}
.is-checked .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #0ea5fa;
  cursor: pointer;
}
.el-checkbox__input.is-disabled + span.el-checkbox__label{
    cursor: pointer;
  color: #000;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #0ea5fa;
  cursor: pointer;
}
.el-checkbox__input.is-disabled .el-checkbox__inner {
   border-color:#fff;
  cursor: pointer;
  transition: all .3s;

}

.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
   border-color:#fff;
   color: #fff;
  cursor: pointer;
}

.el-checkbox__input.is-disabled .el-checkbox__inner:hover{
  border-color: #0ea5fa ;

}

.is-checked  .el-radio__input.is-disabled + span.el-radio__label {
color: #0ea5fa;
    cursor: pointer;
}
.el-radio__input.is-disabled + span.el-radio__label {
      cursor: pointer;
  color: #000;
}
.el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #0ea5fa;
  cursor: pointer;
}
.el-radio__input.is-disabled .el-radio__inner {
  border-color:#fff;
  cursor: pointer;
  transition: all .3s;
}

.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color: #fff;
  cursor: pointer;
}
.el-radio__input.is-disabled .el-radio__inner:hover{
  border-color: #0ea5fa ;

}

</style>
